<template>
  <div class="swiper-wrap">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="swiper in swipers"
        :key="swiper.id"
      >
        <van-image
          height="440"
          fit="cover"
          class="swiper-img"
          :src="swiper.image"
        />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  props: {
    info: Object
  },
  data() {
    return {
      swipers: []
    }
  },
  watch: {
    info: {
      deep: true,
      handler() {
        this.initInfo()
      }
    }
  },
  methods: {
    /**
     * @desc 初始化数据
     */
    initInfo() {
      const { info } = this
      if (info.imageUrlArray) {
        this.swipers = info.imageUrlArray.map((image, id) => {
          return { id, image }
        })
      }
    }
  },
  mounted() {
    this.initInfo()
  }
}
</script>
<style lang="less" scoped>
.swiper-wrap {
  .van-swipe-item {
    .swiper-img{
      width: 100vw;
    }
  }
}

</style>